import Link from "next/link";

import type { Tool } from "@/lib/aigc-data";

const palette = ["#4A6CF5", "#1E88E5", "#5C6BC0", "#26A69A", "#8E24AA"];

function getInitial(name: string) {
  const match = name.trim().match(/[A-Za-z0-9\u4e00-\u9fa5]/u);
  return match ? match[0].toUpperCase() : "A";
}

function getColor(name: string) {
  const code = name
    .split("")
    .reduce((acc, char) => acc + char.charCodeAt(0), 0);
  return palette[code % palette.length];
}

export function ToolCard({ tool }: { tool: Tool }) {
  const initial = getInitial(tool.name);
  const color = getColor(tool.name);

  return (
    <Link
      href={tool.href}
      target="_blank"
      rel="noopener noreferrer"
      className="group relative flex w-full items-center gap-3 rounded-lg border border-border/60 bg-card/90 p-3 shadow-sm transition-all hover:-translate-y-0.5 hover:border-primary/60 hover:shadow-md"
    >
      <div
        className="flex size-10 flex-none items-center justify-center rounded-full text-sm font-semibold text-white shadow-sm"
        style={{ background: color }}
      >
        {initial}
      </div>
      <div className="min-w-0 flex-1">
        <h3 className="truncate text-sm font-semibold text-foreground group-hover:text-primary">
          {tool.name}
        </h3>
        <p className="mt-0.5 line-clamp-1 text-xs text-muted-foreground/80">
          {tool.description}
        </p>
      </div>
    </Link>
  );
}
